<template>
  <div class="box">
    <h1>组件间通信10: 插槽==> 作用域插槽</h1>

    <h2>需求: 自定义TODO列表组件能实现下面需求</h2>

    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <List :data="todos">
      <!-- 
        scope是包含<slot>传递过来的所有数据
        {row: todo对象, $index: 下标}
      -->
      <template v-slot="scope">
        <span :style="{color: scope.row.isComplete ? 'green' : 'black'}">{{scope.row.text}}</span>
      </template>
    </List>

    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
    <List :data="todos">
      <template v-slot="{row, $index}">
        <span :style="{color: $index%2===1 ? 'blue' : 'green'}">{{$index + 1}}--{{row.text}}</span>
      </template>
    </List>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import List from './List.vue'
  import type { Users } from './types';

  const todos = ref<Users>([
    {id: 1, text: 'AAA', isComplete: false},
    {id: 2, text: 'BBB', isComplete: true},
    {id: 3, text: 'CCC', isComplete: false},
    {id: 4, text: 'DDD', isComplete: false},
  ])
</script>
